<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<!-- 组合API 中的生命周期
    https://cn.vuejs.org/api/composition-api-lifecycle.html#onmounted
-->

<body>
<div id="app">

</div>
</body>
<script src="js/vue.js"></script>
<script>

    // 根组件
    const app = Vue.createApp({
        setup(props, context) {
            const {ref, onBeforeMount, onMounted, onRenderTracked, onRenderTriggered} = Vue;
            let msg = ref('组合API 中的生命周期');

            // 在组件内容被渲染到页面之前调用
           onBeforeMount( () => {
               // 这里增加断点，打开控制台可以看到执行的效果
               // debugger
               console.log("--------onBeforeMount--------");
           });


            // 在组件挂载完成后执行 在绑定元素的父组件，及他自己的所有子节点都挂载完成后调用
            onMounted( () => {
                // debugger
                console.log("--------onMounted--------");
            });

            // 每次渲染后重新收集响应式依赖， 这个钩子仅在开发模式下可用，且在服务器端渲染期间不会被调用。
            onRenderTracked(()=>{
                console.log("--------onRenderTracked--------");
            });

            onRenderTriggered(()=>{
                console.log("--------onRenderTriggered--------");
            });

            const change = () => {
                msg.value = '变化数据，观察 onRenderTracked 与 onRenderTracked';
            };

            return {
                msg, change
            }
        },
        template: `
          <div @click="change">
            <p>{{msg}}</p>
          </div>
        `
    }).mount("#app");

</script>

</html>
